import './main.scss'

import { defineComponent } from 'vue'

import {
  ElDialog,
  ElButton
} from 'element-plus'

import { createComponentName } from '../utils'

const [name, bem] = createComponentName('dialog')

export default defineComponent({
  name,

  props: {
    width: {
      type: String,
      default: '30%'
    },
    show: {
      type: Boolean,
      default: false
    },
    showFoot: {
      type: Boolean,
      default: true
    },
    showFootcontent: {
      type: Boolean,
      default: false
    },
    showCancelBtn: {
      type: Boolean,
      default: true
    },
    showSubmitBtn: {
      type: Boolean,
      default: true
    },
    showSaveBtn: {
      type: Boolean,
      default: false
    },
    footContent: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    saveText: {
      type: String,
      default: '保存'
    },
    submitText: {
      type: String,
      default: '确定'
    },
    isDisable: Boolean,
    appendToBody: {
      type: Boolean,
      default: true
    }
  },

  emit: [
    'close',
    'update:show',
    'cancel',
    'save',
    'confirm'
  ],

  setup(props, { emit, slots }) {

    const handleClose = (done: () => void) => {
      emit('close', false)
      emit('update:show', false)
      done()
    }

    return () => {
      const dialogSlots = {
        title: () => (<div class="dialog_header">{ props.title }</div>),
        footer: props.showFoot ? () => (
          <div class="footer">
            <div>
              {
                props.showFootcontent && <span class="text">{ props.footContent }</span>
              }
            </div>
            <span class="dialog_footer">
              {
                props.showCancelBtn
                  ? <ElButton onClick={ () => emit('cancel') }>{ props.cancelText }</ElButton>
                  : null
              }
              {
                props.showSaveBtn
                  ? <ElButton onClick={ () => emit('save') }>{ props.saveText }</ElButton>
                  : null
              }
              {
                props.showSubmitBtn
                  ? <ElButton
                    disabled={ props.isDisable }
                    type={ !props.isDisable ? 'primary' : 'info' }
                    onClick={ () => emit('confirm') }
                  >{ props.submitText }</ElButton>
                  : null
              }
            </span>
          </div>
        ) : null
      }

      return (
        <ElDialog
          vSlots={ dialogSlots }
          customClass={ bem() }
          vModel={ props.show }
          width={ props.width }
          appendToBody={ props.appendToBody }
          destroyOnClose
          beforeClose={ handleClose }
        >
          <section>
            { slots.default?.() }
          </section>
        </ElDialog>
      )
    }
  }
})
